import { ComponentProps, Hook, Mut, VueComponent } from "vue3-oop"
import { Card } from 'ant-design-vue';
import moduleCss from './fvr-card.module.scss'
import { WidgetNode } from '../../types/index'

import { CARD } from '../attr-widget'
import FvrGrid from "../_grid/fvr-grid";

interface IProps {
  widgetNode: WidgetNode
}
export default class FvrCard extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  @Mut() state = {
    tabKey: '',
    tabIndex: 0
  }

  render() {
    const { formData,widgetNode } = this.props;
    const widgetItem = widgetNode.widgetItem;
    const attr = widgetItem[widgetItem.type] as CARD;

    const gridNode = widgetNode.children[this.state.tabIndex];

    if(this.state.tabKey===''&&attr.tabList.length>0){
      this.state.tabKey = attr.tabList[0].key;
    }

    return (
      <Card 
        title={attr.showTitle?attr.title:undefined}
        tabList= {attr.showTab?attr.tabList:undefined}
        activeTabKey= {this.state.tabKey}
        onTabChange={(tab)=>{
          this.state.tabKey = tab;
          attr.tabList.forEach((item,index)=>{if(item.key===tab){this.state.tabIndex=index}})
        }}
        class={[moduleCss['fvr-card']]}
      >
        {{
          default:()=>(
            <div
              class={[moduleCss['card-grid']]}
              onClick={(event:MouseEvent)=>{
                event.stopPropagation();
                gridNode.setSelected();
              }}
            >
              <FvrGrid
                formData={formData}
                widgetNode={gridNode}
              />
            </div>
          ),
        }}
      </Card>
    )
  }
}